<template>
    <div :class="{container:true,'sign-up-model':vari}">
        <div class="inner-left-container">
            <div class="login-content">
                <h1>航顺芯片</h1>
                <ElButton type="primary" @click="onClick">去注册</ElButton>
            </div>
            <img src="@/assets/register-bg.svg" alt="注册图片" class="image">
        </div>
        <div class="inner-right-container">
            <div class="register-content">
                <h1>航顺芯片</h1>
                <ElButton type="primary" @click="onClick">去登录</ElButton>
            </div>
            <img src="@/assets/login-bg.svg" alt="登录图片" class="image">
        </div>
        <div class="inner-sign-up-container">
            <loginForm :class="{'sign-label':vari}"></loginForm>
            <registerForm :class="{'sign-label':!vari}"></registerForm>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import loginForm from '@/componets/login/loginForm.vue';
import registerForm from '@/componets/login/registerForm.vue';

let vari = ref<boolean>(false)

const onClick=()=>{
    vari.value = !vari.value;
}

</script>

<style lang="scss" scoped>
.container{
    background-color: rgb(255, 255, 255);
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
}
.container::before{
    content: "";
    width: 2000px;
    height: 2000px;
    position: absolute;
    border-radius: 50%;
    background-color: rgb(100, 136, 116);
    transform: translateY(-50%);
    right: 48%;
    top:-15%;
    transition: 1.2s ease-in-out;
}

.inner-left-container{
    width: 0;
    flex: 1;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;
    align-items: flex-end;
    padding: 3rem 10% 2rem 10%;
    .image{
        width: 40%;
        height: 40%;
    }
}

.inner-right-container{
    width: 0;
    flex: 1;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;
    align-items: flex-start;
    padding: 3rem 10% 2rem 10%;
    .image{
        width: 40%;
        height: 40%;
    }
}

.container.sign-up-model::before{
    transform: translate(100%,-50%);
    transition: 1.2s ease-in-out;
}

.container .inner-right-container .register-content,
.container .inner-right-container .image{
    transform: translateX(1000px);
    transition: 1.2s ease-in-out;
}

.container .inner-left-container .login-content,
.container .inner-left-container .image{
    transform: translateX(0px);
    transition: 1.2s ease-in-out;
}

.container.sign-up-model .inner-left-container .login-content,
.container.sign-up-model .inner-left-container .image{
    transform: translateX(-1000px);
    transition: 1.2s ease-in-out;
}

.container.sign-up-model .inner-right-container .register-content,
.container.sign-up-model .inner-right-container .image{
    transform: translateX(0px);
    transition: 1.2s ease-in-out;
}

.login-content .register-content{
    width: 70%;
    text-align: center;
}
.inner-sign-up-container{
    width: 25%;
    height: 60%;
    position: absolute;
    right: 15%;
    top:20%;
    transition: 1.2s ease-in-out;
}

.container.sign-up-model .inner-sign-up-container{
    transform: translateX(-700px);
    transition: 1.2s ease-in-out;
}

.inner-sign-up-container>.sign-label{
    transition: 3s ease-in-out;
    transition-delay: 2s;
    display: none;
    
}

// .container.sign-up-model .inner-right-container{
//     pointer-events: all;
// }
// .container.sign-up-model .inner-left-container{
//     pointer-events: all;
// }


</style>